<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> 
<script src="/static/javascript/jquery.min.js"></script> 
<script src="/static/javascript/jquery.form.js"></script> 
<script src="/static/javascript/validate.js"></script> 
<script src="/static/javascript/jquery.uploadProgress.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="viewport" content="width = 900"/> 
<title>Import Delicious Bookmarks</title> 
</head>
<body>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
                $('#iuser').focus();
                //$('#import_form').validate();
                $('#import_form').ajaxForm({ 
target: '#response', 

// success identifies the function to invoke when the server response 
// has been received; here we apply a fade-in effect to the new content 
success: function() { 
$('#response').fadeIn('slow'); 
} 
}); 
                });
</script>
<script type="text/javascript">
interval = null;

function openProgressBar() {
        /* generate random progress-id */
        uuid = "";
        for (i = 0; i < 32; i++) {
                uuid += Math.floor(Math.random() * 16).toString(16);
        }
        /* patch the form-action tag to include the progress-id */
        document.getElementById("upload").action="/upload?X-Progress-ID=" + uuid;

        /* call the progress-updater every 1000ms */
        interval = window.setInterval( function () {  fetch(uuid);  }, 1000 );
}

function fetch(uuid) {
        req = new XMLHttpRequest();
        var bar_updated = false;
        req.open("GET", "/progress", 1);
        req.setRequestHeader("X-Progress-ID", uuid);
        req.onreadystatechange = function () {
                if (req.readyState == 4) {
                        if (req.status == 200) {
                                /* poor-man JSON parser */
                                var upload = eval(req.responseText);

                                document.getElementById('tp').innerHTML = upload.state;

                                /* change the width if the inner progress-bar */
                                if (upload.state == 'done' || upload.state == 'uploading') {
                                        alert('upload received : '+ upload.received);
                                        alert('upload size: '+ upload.size);
                                        bar = document.getElementById('progressbar');
                                        w = 400 * upload.received / upload.size;
                                        bar.style.width = w + 'px';
                                        if (upload.stats == 'uploading'){
                                                bar_updated = true;
                                        }
                                }
                                /* we are done, stop the interval */
                                if (upload.state == 'done') {
                                        window.clearTimeout(interval);
                                        alert(bar_updated);
                                        if (bar_updated == false){
                                                bar = document.getElementById('progressbar');
                                                bar.style.width = 400 + 'px';
                                        }
                                        sendTitle();
                                }
                        }
                }
        }
        req.send(null);
}
function sendTitle(){
        try{
                req = new XMLHttpRequest();
                title=document.getElementById('title').value;
                params = "title="+title+"&signal=done";
                req.open("GET", "/upload?"+params, 0);
                req.setRequestHeader("Content-length", params.length);
                req.setRequestHeader("Connection", "close");

                req.send(null);
                document.getElementById('response').innerHTML=req.responseText;
                alert(req.responseText);

        }catch(e){alert(e);}
}
</script>
<div style="display: block">
<form id="upload" action="/upload" method="post" enctype="multipart/form-data" target="uploadframe" onsubmit="return openProgressBar(); return true;">
<input type="hidden" name="MAX_FILE_SIZE" value="30000000"  />
<div><label for="title">Title</label><input type="text" name="title" id="title"></div>
<div><label for="userfile">File:<input type="file" name="userfile"></label></div>
<div><input type="submit" value="Upload"></div>
</form>
<iframe id="uploadframe" name="uploadframe" width="0" height="0" frameborder="0" border="0" src="about:blank"></iframe>
</div>
<div>
<div id="progress" style="width: 400px; border: 1px solid black">
<div id="progressbar" style="width: 1px; background-color: black; border: 1px solid white">&nbsp;</div>
</div>
</div>
<div id="response">
</div>
<div id="tp">(progress)</div>
</div>
</body>
</html>
